<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le styles -->
    <link href="bootstrap.css" rel="stylesheet">
	
    <style type="text/css">
      /* Override some defaults */
      html, body {
        background-color: #777;
      }
      body {
        padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */
		
      }
      .container > footer p {
        text-align: center; /* center align it with the container */
      }
      .container {
        width: 820px; /* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 14 columns and not 16. */
      }

      /* The white background content wrapper */
      .container > .content {
        background-color: #fff;
        padding: 20px;
        margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
        -webkit-border-radius: 0 0 6px 6px;
           -moz-border-radius: 0 0 6px 6px;
                border-radius: 0 0 6px 6px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
                box-shadow: 0 1px 2px rgba(0,0,0,.15);
      }

      /* Page header tweaks */
      .page-header {
        background-color: #f5f5f5;
        padding: 20px 20px 10px;
        margin: -20px -20px 20px;
      }

      /* Styles you shouldn't keep as they are for displaying this base example only */
      .content .span10,
      .content .span4 {
        min-height: 500px;
      }
      /* Give a quick and non-cross-browser friendly divider */
      .content .span4 {
        margin-left: 0;
        padding-left: 19px;
        border-left: 1px solid #eee;
      }

      .topbar .btn {
        border: 0;
      }

    </style>

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
  </head>

  <body>
  
  		<!-- POST WINDOW-->
		<div id="PostWindow"></div>
		
		<div class="modal" id="GetByDatesWindow"></div>

		<div class="modal" id="GetByTagsWindow"></div>
		
		<div class="modal" id="GetByUsersWindow"></div>

    <div class="topbar">
      <div class="fill">
        <div class="container">
          <a class="brand" href="#">DART BLOG</a>

		  <div id="singing">

		  </div>
        </div>
      </div>
    </div>

    <div class="container">

      <div class="content" >
        <div class="page-header">
          <h1>DART BLOG <small id="pagename">All Posts</small></h1>
        </div>
        <div class="row">
          <div class="span10">
            
			<div class="row-fluid" id = "posts">
			</div>
			
			
			<div class="row-fluid">
				<!-- Paganation -->
					<ul class="pager">
					  <li class="prevdisabled" id = "prevButton">
						<a href="#">&larr; Previous</a>
					  </li>
					  
					  <li class="nextdisabled" id = "nextButton">
						<a href="#">Next &rarr;</a>
					  </li>
					</ul>
			</div>
			
          </div>
		  
		  <!-- SIDE BAR -->
          <div class="span4" id = "sidebar">
		  <!--
			<div id = "buttons" class="well" style="padding: 8px 0;">
				<ul class="nav-list">
					<li class="nav-header">Start blogging</li>
					<li class="" id="MakePost" ><a href="#">Post Text</a></li>
					<li class="" id="filterByUser"><a href="#">Posts by user</a></li>
					<li class="" id="filterByDates"><a href="#">Posts by dates</a></li>
					<li class="" id="filterByTags"><a href="#">Posts by tags</a></li>
				</ul>
			</div>
			-->
          </div>
        </div>
      </div>

      <footer>
        <p>&copy; Company 2012</p>
      </footer>

    </div> <!-- /container -->
<script type="application/dart" src="Blog.dart"></script> 
  </body>
</html>
